import React, { Component } from 'react';
import Loginto from '../../api/Login';
import { withRouter } from "react-router-dom"
import { connect } from 'react-redux'
import { set_profile } from '../../store/actionCreator'
import style from "./style.module.scss"
import { Button, Checkbox, Form, Input, message } from 'antd';
// import {message}from'antd'loginbox
const { loginbox, bigbanner, titlebox } = style
class LOGIN extends Component {
    onFinish = async (values) => {
        // let res = await Loginto["login"](values)
        // console.log(res.data.data);
        this.props.LOGIN(values).then(res=>{
            // console.log(values,"value");
            // console.log(res,'res');
        if (res.code === 200) {
            // console.log("登录");
            message.success({
                content: res.message,
                onClose: () => {
                    let redirectTo=this.props.location.state&&this.props.location.state.redirectTo
                    this.props.history.push(redirectTo ? redirectTo : '/') 
                }
            })
        }else{
            message.error({
                content: res.message,
            })
        }
        })
    };

    onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    render() {
        return <div className={bigbanner}>
            <Form
                name="basic"
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                style={{
                    maxWidth: 600,
                }}
                // initialValues={this.state.user}
                onFinish={this.onFinish}
                onFinishFailed={this.onFinishFailed}
                autoComplete="off"
                className={loginbox}
            >
                <h2 className={titlebox}>爱彼迎后台管理系统</h2>
                <Form.Item
                    style={{ width: "140%" }}
                    label="姓名"
                    name="tel"
                    rules={[
                        {
                            required: true,
                            message: '请输入手机号',
                        },
                        { pattern: new RegExp(/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/), message: '请输入11位正确手机号' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    style={{ width: "140%" }}
                    label="密码"
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码',
                        }
                    ]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit" style={{ marginLeft: 50, paddingLeft: 60, paddingRight: 60, backgroundColor: "#e61e4d" }}>
                        登录
                    </Button>
                </Form.Item>
            </Form></div>
    }
}
const mapStateToProps = (state) => ({
    user: state.user
})

const mapDispatchToProps = (dispatch) => ({
    LOGIN: async (info) => {
        // console.log(info,'info');
        let res = await Loginto['login'](info)
        if (res.code === 200) {
            console.log(res,"res");
            dispatch(set_profile(res.data.data[0]))
        }
        return res.data
    }
})
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(LOGIN));
